<template>
<div class="myco">
      <div class="kong"  v-if="arr.length==0">
        <img src="../../../../../../bilibili/src/static/nodata.png" alt="">
        <p>这里什么都没有</p>
    </div>
         <div>
      <div class="main" v-for="(item,index) in arr" :key="item.housesid">
            <radio-group v-if="flag==true" >
                <radio color="#fd7aa6" :checked="item.badgepay" :data-index="index" @tap="changeCheck"/>
            </radio-group>
        <div class="left">
          <navigator
            :url="`../purchase/purchase?title=${item.housetitle}&img=${item.imgurl}&bedroom=${item.bedroom}&sqname=${item.sqname}&heading=${item.heading}&livingroom=${item.livingroom}&toilet=${item.toilet}&buildarea=${item.buildarea}&qyname=${item.qyname}`"
          >
            <img :src="item.imgurl" alt="">
          </navigator>
          <span>{{item.housetag}}</span>
        </div>
        <div class="right">
          <p>{{item.housetitle}}</p>
          <span>{{item.bedroom}}室{{item.livingroom}}厅{{item.toilet}}卫</span>
          <span>{{item.buildarea}}m²</span>
          <span>{{item.heading}}</span>
          <span>{{item.qyname}}</span>
          <span>{{item.sqname}}</span>
          <div class="tag">
            <span v-for="(ite,index) in item.tagwall" :key="index">{{ite}}</span>
          </div>
        </div>
      </div>
    </div>
        <div class="footer">
          <span v-if="flag==false" @click="changeFlagTrue()">编辑</span>
          <div v-else-if="flag==true" class="footer_true">
              <p><radio color="#fd7aa6" :checked="checkAll"  @tap="changeCheckAll" />全选</p>
              <span @click="changeFlagFalse()">取消</span>
              <button @click="del">删除</button>
          </div>
    </div>
    </div>  
</template>

<script>
import {myCollectionList,myco} from "../../services/index"
export default {
    data(){
        return {
            myCollectionList:[],
            flag:false,
            checkAll:false,
            checkOne:false,
            arr:[]
        }
    },
    async onShow(){ 
      let result= await myco()
      this.myCollectionList=result.data.list
      console.log(this.myCollectionList,"1111111");
      this.myCollectionList.map((item=>{
         this.arr.push(Object.assign({},item,{badgepay:false}))
      }))
      console.log(this.arr);
            //进页面改变数据状态
             this.arr.map(item=>{
           item.badgepay=false;
       })
  },
  methods:{
         //全选--删除--取消
      changeFlagTrue(){
          this.flag=true
      },
      //编辑
      changeFlagFalse(){
          this.flag=false
         this.arr.map(item=>{
           item.badgepay=false;
       })
       this.checkAll=false;
      },
       //反选
      changeCheck(e){
        let dataList=this.arr;
          let thisIndex=e.currentTarget.dataset.index;
          dataList.forEach((item,index)=>{
              if(thisIndex==index){
                  item.badgepay=!item.badgepay
              }
          })
       this.checkAll= dataList.every((item)=>{
              return item.badgepay
          })
      },
      //全选
      changeCheckAll(e){
          this.checkAll=!this.checkAll;
           let dataList=this.arr;
          dataList.forEach((item)=>{
            item.badgepay=this.checkAll
          })
      },
      //删除
      del(){
       this.arr= this.arr.filter(item=>{
           return item.badgepay==false;
        })
      }
  }
}
</script>

<style lang="scss" scoped>
.myco{
    width: 100%;
    height: 100%;
         .kong{
         width: 100%;
         height: 100%;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content:center;
         color: #888;
     }
     
    .main {
  display: flex;
  padding: 10px;
  .left {
    display: flex;
    flex-direction: column;
    span {
      font-size: 12px;
      position: relative;
      bottom: 120px;
      background: rgb(250, 235, 25);
      width: 30px;
    }
    img {
      width: 120px;
      height: 120px;
      border-radius: 5px;
    }
  }
  .right {
    margin-left: 10px;
    width: 60%;
    height: 100%;
    p {
      font-size: 13px;
    }
    span {
      font-size: 12px;
      color: #666;
      padding: 0 2px;
    }
    .tag {
      > span {
        margin: 0 2px;
        padding: 0 2px;
        background: #eee;
      }
    }
  }
}
     .footer{
         width: 100%;
         height: 120rpx;
         position: fixed;
         bottom: 0;
         left: 0;
         background: #fff;
         line-height: 120rpx;
        span{
            margin-left: 350rpx;
            font-size: 40rpx;
        }
        .footer_true{
            width: 100%;
            height: 100%;
            display: flex;
            button{
                border: none;
                outline: none;
                line-height: 120rpx;
            }
        }
     }

}
</style>